{% extends 'web/system.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'userCenter.css' %}">
{% endblock css %}

{% block content %}
<div class="frame">
    <dov class="modify-box">
        <form class="plan-table">
            {% for plan in plans %}
            <div class="card">
                <h3 class="title">
                    <ion-icon style="color: grey;" name="pricetag-outline"></ion-icon>
                    <span>{{ plan.title }}</span>
                </h3>
                <ul class="intro">
                    {% for info in plan.infos %}
                    <li>
                        {{ info }}
                    </li>
                    {% endfor %}
                </ul>
                {% if not forloop.last %}
                <div class="prompt">
                    点击卡片选择你想要的套餐
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </form>
    </dov>
    <div class="modify-box">
        <h3 style="text-align: center;">个人信息</h3>
        <form id="userInfo">
            {% csrf_token %}
            {% for field in form %}
            {% if field.name == 'code' %}
            <div class="user-box">
                <div id="code-box">
                    <span style="flex: 0 0 40%;">
                        {{ field }}
                        <span class="error-prompt"></span>
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    </span>
                    <a id="btnSms" style="flex: 0 0 60%;height: 40px;">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <b>点击获取验证码</b>
                    </a>
                </div>
            </div>
            {% else %}
            <div class="user-box">
                {{ field }}
                <span class="error-prompt"></span>
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            </div>
            {% endif %}
            {% endfor %}
            <div id="global">密码已加密, 若不重置请勿修改</div>
            <a id="commit">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                点击提交
            </a>
        </form>
    </div>
</div>
{% endblock content %}
{% block script %}
<script>
    $('#btnSms').click(function () {
        $('#global').empty()
        $('.error-prompt').empty()
        // 获取用户的手机号
        var mobile_phone = $('#id_mobile_phone').val();

        $.ajax({
            url: "{% url 'send_sms'%}",
            type: "GET",
            data: { mobile_phone: mobile_phone, template: '{{ mode }}' },
            dataType: 'JSON',
            success: function (res) {
                //console.log(res)
                if (res.status) {
                    // 启动倒计时功能
                    sendSmsRemind();
                } else {
                    const keys = Object.keys(res.error)
                    for (let i = 0; i < keys.length; i++) {
                        $('#id_' + keys[i]).next().text(res.error[keys[i]])
                    }
                }
            }
        })
    })
    /*
        倒计时功能
    */
    function sendSmsRemind () {
        var $smsBtn = $('#btnSms');
        // 禁用状态
        var time = 60;
        var b = document.querySelector('b');
        var a = document.querySelector('a');
        a.style.pointerEvents = "none";
        var remind = setInterval(function () {
            b.innerHTML = (time + '秒重新发送');
            time -= 1;
            if (time < 1) {
                clearInterval(remind);
                a.style.pointerEvents = "";
                b.innerHTML = ('点击获取验证码');
            }
        }, 1000)
    }
</script>
<script>
    $.ajax({
        url: "{% url 'userGet' %}",
        type: 'GET',
        success: (res) => {
            if (res.status) {
                const form = document.querySelector('#userInfo')
                Object.keys(res.userInfo).forEach(key => {
                    const input = form.querySelector('#id_' + key)
                    if (input !== null) {
                        input.value = res.userInfo[key]
                    }
                })
                form.querySelector('#id_confirm_password').value = res.userInfo['password']
            } else {
                location.href = '/account'
            }
        }
    })
</script>
<script>
    $('#commit').click(function () {
        $('.error-prompt').empty()

        $.ajax({
            url: "{% url 'userSave' %}",
            type: 'POST',
            data: $('#userInfo').serialize(),
            success: (res) => {
                if (!res.status) {
                    const keys = Object.keys(res.error)
                    for (let i = 0; i < keys.length; i++) {
                        $('#id_' + keys[i]).next().text(res.error[keys[i]])
                    }
                } else {
                    alert('信息更新成功')
                    location.reload()
                }
            }
        })
    })
    document.querySelectorAll('.card').forEach((item, index, array) => {
        if (index !== array.length - 1) {
            item.addEventListener('click', function () {
                const plan = this.querySelector('.title span').innerHTML
                if (confirm('确认购买' + plan + '?')) {
                    // 跳转支付
                    $.ajax({
                        url: "{% url 'makeOrder' %}",
                        type: 'POST',
                        data: {
                            csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                            plan: plan,
                        },
                        success: (res) => {
                            alert(res.msg)
                            location.reload()
                        }
                    })
                    // 购买成功
                }
            })
        }
    })
</script>
{% endblock script %}